<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>司法所管理</title>
<link href="${request.contextPath}/css/layout.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/css/cb.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"href="${request.contextPath}/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/demo/demo.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/js/laypage/skin/laypage.css" />
<script type="text/javascript" src="${request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${request.contextPath}/js/work-mange.js"></script>
<script type="text/javascript" src="${request.contextPath}/laydate/laydate.js"></script>
<script type="text/javascript" src="${request.contextPath}/js/laypage/laypage.js"></script>
<script src="${request.contextPath}/js/vue/vue.min.js" charset="utf-8"></script>
</head>
<body>
	<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td width="1%" align="left" background="${request.contextPath}/images/b2.jpg"><img src="${request.contextPath}/images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="${request.contextPath}/images/b2.jpg">
			<table width="124" border="0" align="left" cellpadding="0" cellspacing="0">
				<tr>
					<td width="20" align="left"><img src="${request.contextPath}/images/tz.gif" width="10" height="16" /></td>
					<td width="104" align="left" class="biao">查找矫正单位</td>
				</tr>
			</table>
			</td>
			<td width="31%" align="right" background="${request.contextPath}/images/b2.jpg"><img src="${request.contextPath}/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#AEDEF4">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
				<table width="80%" border="0" cellspacing="1" cellpadding="3">
					<tr>
						<td width="30%" align="right">矫正单位:</td>
						<td width="10%" align="left"><input id="name" size="25" class="easyui-textbox" data-options="prompt:'请输入矫正单位名称'"/></td>
						<td width="10%" align="left"><input type="button" value=" 查找 " onclick="app.getPageList()" /></td>
						<td width="40%" colspan="2" align="right"><input type="button" onclick="addEvent()" value="增加记录" /> <input type="button" value="导出Excle" onclick="exportEvent()"/></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<table width="50%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="5"></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td width="1%" align="left" background="${request.contextPath}/images/b2.jpg"><img src="${request.contextPath}/images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="${request.contextPath}/images/b2.jpg">
				<table width="124" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="${request.contextPath}/images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">矫正单位列表</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="${request.contextPath}/images/b2.jpg"><img src="${request.contextPath}/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4" id="app">
		<tr>
			<td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
			<td align="center" bgcolor="#EFFBFE">矫正单位</td>
			<td align="center" bgcolor="#EFFBFE">地理位置</td>
			<td align="center" bgcolor="#EFFBFE">负责人</td>
			<td align="center" bgcolor="#EFFBFE">联系电话</td>
			<td align="center" bgcolor="#EFFBFE">管理操作</td>
		</tr>
		<tr v-for="(item,index) in result" onmouseout="this.style.backgroundColor='#ffffff'" bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'">
			<td height="25" align="center"><span v-text="startIndex+index"></td>
			<td align="center"><strong v-text="item.name" /></td>
			<td align="center" v-text="item.location" ></td>
			<td align="center" v-text="item.principal" ></td>
			<td align="center" v-text="item.phonenum" ></td>
			<td align="center">
				<input type="button" @click="editEvent(item.id)" name="" value="修改" />
				<input type="button" @click="app.delJudicialDeptment(item.id)" name="" value="删除" />
			</td>
		</tr>
		<tr>
            <td colspan="6" align="center">
                <div id="pagediv"></div>
            </td>
        </tr>
	</table>
	
	<!-- 增加矫正单位弹出框 -->
	<div id="dlag"></div>
	<!-- 修改矫正单位弹出框 -->
	<div id="dlag2"></div>
	
</body>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            result:[],
            currPage:1,
            startIndex:1
        },
        mounted : function() {
			this.$nextTick(function() {
				this.getPageList();
			});
		},
		methods:{
			//得到矫正单位列表
		    getPageList:function(curr){
		        $.ajax({
		            url:'${request.contextPath}/judicialDeptment/querylike',
		            data:{
		                name:$("#name").val(),
		                pageNum:curr || 1,
		                pageSize:5
		            },
		            type:'get',
		            dataType:'json',
		            success:function(res){
		                app.result=res.data[0].result;
		                app.startIndex=(res.data[0].curPageNum-1)*res.data[0].pageSize+1;
		                laypage({
		                    cont : 'pagediv', //容器。值支持id名、原生dom对象，jquery对象,
		                    pages : res.data[0].totalPage, //总页数
		                    first : "首页",
		                    last : "尾页",
		                    skip : true, //是否开启跳页
		                    skin : '#5675A2',
		                    curr : curr || 1, //当前页
		                    jump : function(obj, first) { //触发分页后的回调
		                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
		                        	app.currPage=obj.curr;
		                            app.getPageList(app.currPage);
		                        }
		                    }
		                });
		            }
		        });
		    },
		  	//添加矫正单位
		    addJudicialDeptment:function(){
		        $.ajax({
		            url:'add',
		            data:$('#form1').serialize(),
		            type:'post',
		            dataType:'json',
		            success:function(res){
		                if(res.code==0){
		                    app.getPageList(app.currPage);
		                }
		                    app. showMsg(res.message);
		            }
		        });
		    },
		 	//删除矫正单位
		    delJudicialDeptment:function(id) {	
		        $.messager.confirm('提示框', '你确定要删除吗?',function(i){
		            if(i){
		            //确认删除
		                $.ajax({
		                    url:'del',
		                    data:{
		                        id:id
		                    },
		                    type:'get',
		                    dataType:'json',
		                    success:function(res){
		                        if(res.code==0){
		                        	if(app.result.length==1){
		                        		app.currPage--;
		                        	}
		                            app.getPageList(app.currPage);
		                        }
		                        app.showMsg(res.message);
		                    }
		                });
		            }
		        })
		    },
		  	//修改矫正单位记录
		    updateJudicialDeptment:function(){
		    	$.ajax({
		            url:'update',
		            data:$('#form2').serialize(),
		            type:'get',
		            dataType:'json',
		            success:function(res){
		                if(res.code==0){
		                    app.getPageList(app.currPage);
		                }
		                app.showMsg(res.message);
		            }
		        });
		    },
		    //显示提示信息
		    showMsg:function(msg){
		    	$.messager.show({
		    		title:'提示',
		    		msg:msg,
		    		timeout:5000,
		    		showType:'slide',
		    	});
		    }
		}
    });
    

	 //监听添加事件
    var addEvent=function(){
	   	$('#dlag').dialog({    
	   	    title: '增加矫正单位',    
	   	    width: '600px',    
	   	    height: '400px',
	   	    closed: false,
	   	    region:'center',
	   	    cache: false,    
	   	    href: 'page?page=work-manage/judicial_deptment_add',    
	   	    modal: true,
	   	    iconCls: 'icon-save',
			buttons: [{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					if($("#form1").form('validate')){
						app.addJudicialDeptment();
						$('#dlag').dialog('close');						
					}
				}
			},{
				text:'取消',
				handler:function(){
					$('#dlag').dialog('close');
				}
			}]
	   	});
    }
   
    //修改事件
    var editEvent= function(id) {
    	$('#dlag2').dialog({    
	   	    title: '修改矫正单位',    
	   	    width: '600px',    
	   	    height: '400px',
	   	    padding:'10px',
	   	    closed: false,
	   	    region:'center',
	   	    cache: false,    
	   	    href: 'get?id='+id,    
	   	    modal: true,
	   	    iconCls: 'icon-save',
			buttons: [{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					if($("#form2").form('validate')){
						app.updateJudicialDeptment();
						$('#dlag2').dialog('close');						
					}
				}
			},{
				text:'取消',
				handler:function(){
					$('#dlag2').dialog('close');
				}
			}]
	   	});
    }
    
    //导出事件
    var exportEvent=function(){
    	var url="export?name="+$("#name").val();
    	window.open(url);
    }
  	
    
</script>

</html>